<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="description" content="PlayerX">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta id="theme-color" name="theme-color" content="#ffffff">
    <base target="_blank">
    <script src="./jquery.min.js"></script>
    <script src="./adapter.min.js"></script>
    <script src="./mrtcsession.js"></script>
    <script src="../../Desktop/meetingDemo/static/myjs.js"></script>
</head>

<body>
    <div class="videocontainer">
        mrtc://mudu.ns.4l.hk:8188/AAAAA/pgm<br> player1 url: <input type="text" id="playurl" style="width:200px;height:20px;" placeholder="mrtc://mudu.ns.4l.hk:8188/AAAAA/pgm" value="mrtc://mudu.ns.4l.hk:8188/AAAAA/pgm" />
        <div id="remoteVideo" style="width:200px;height:200px;overflow:auto;"></div>
    </div>
    <button id="start">start</button>
    <button id="stop">stop</button>
    <input type="text" id="volume" />
    <button id="Mute1">mute</button>

    <div class="videocontainer">
        player2 url: <input type="text" id="playurl2" style="width:200px;height:20px;" placeholder="mrtc://mudu.ns.4l.hk:8188/AAAAA/pgm" />
        <div id="remoteVideo2" style="width:200px;height:200px;overflow:auto;"></div>
    </div>
    <button id="start2">start</button>
    <button id="stop2">stop</button>
    <button id="Mute2">mute</button>

    <div class="videocontainer">
        player3 url: <input type="text" id="playurl3" style="width:200px;height:20px;" placeholder="mrtc://mudu.ns.4l.hk:8188/AAAAA/pgm" />
        <div id="remoteVideo3" style="width:200px;height:200px;overflow:auto;"></div>
    </div>
    <button id="start3">start</button>
    <button id="stop3">stop</button>
    <button id="Mute3">mute</button>

    <script src="./mrtc.js"></script>
    <script type="text/javascript">
        var video = document.getElementById('remoteVideo');
        var video2 = document.getElementById('remoteVideo2');
        var video3 = document.getElementById('remoteVideo3');
        var player = Mrtc.setup(video,{codec:'vp8'});


        var playurl = $("#playurl").val();
        // player.play("mrtc://118.178.135.125:8188/cat/dog");
        // player.play("mrtc://118.178.135.125:8188/livexx111/pgm");
        player.play("mrtc://118.178.135.125:8188/jiegetest/pgm");

        $('#start').click(function() {
            var playurl = $("#playurl").val();
            player.play(playurl);
        });

        $('#stop').click(function() {
            player.stop();
        });
        $('#Mute1').click(function() {
            var volume = $("#volume").val();
            player.setPlayVolume(volume);
        });

        var player2 = Mrtc.setup(video2);
        $('#start2').click(function() {
            var playurl2 = $("#playurl2").val();
            player2.play(playurl2);
        });

        $('#stop2').click(function() {
            player2.stop();
        });
        $('#Mute2').click(function() {
            var volume = $("#volume2").val();
            player2.setPlayVolume(volume);
        });

        var player3 = Mrtc.setup(video3);
        $('#start3').click(function() {
            var playurl3 = $("#playurl3").val();
            player3.play(playurl3);
        });

        $('#stop3').click(function() {
            player3.stop();
        });
        $('#Mute3').click(function() {
            var volume = $("#volume3").val();
            player3.setPlayVolume(volume);
        });
    </script>
</body>

</html>